<template>
	<view class="botton-fixed-box flex_cc">
		<view class="text-c">
			<view class="item-list" :style="{height: ext ? '300rpx' : 0}">
				<view v-for="(item, index) in itemList" :key="index" class="item-box flex_cc" @click="trigger(index)">
					<image :src="`${setting.oss_pub_domain}/app-img/icon/${item.icon}.png`" class="icon"></image>
					<view>{{ item.name }}</view>
				</view>
			</view>
			<view class="garden flex_cc" @click="ext = !ext" :style="{ transform: `rotate(${ext ? 135 : 0}deg)` }">
				<uni-icons type="plusempty" size="32" color="#FFFFFF"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps(['playerId'])
const itemList = [{
	name: '发起评测',
	icon: 'plan-white'
}, {
	name: '记录问题',
	icon: 'record-white'
}, {
	name: '预约授课',
	icon: 'play-white'
}], ext = ref(false);

function close() {
	ext.value = false
}

defineExpose({close})

function trigger(e) {
	if (e === 0)
		uni.navigateTo({
			url: `/pages/player/evaluation/student-cpdetail/student-cpdetail?id=${props.playerId}`
		});
	else if (e === 1) recordingProblem();
	else if (e === 2) createCourse();
}

// 创建课程
function createCourse() {
	uni.removeStorageSync('edit-course');
	uni.navigateTo({
		url: '/pages/player/course/course-edit'
	});
}

// 记录问题
function recordingProblem() {
	uni.setStorageSync('edit-question', {});
	uni.navigateTo({
		url: '/pages/question/edit/create?type=1&source=1'
	});
}
</script>

<style lang="scss" scoped>
.botton-fixed-box {
	width: 100vw;
	position: sticky;
	bottom: 64rpx;
	.garden {
		width: 110rpx;
		height: 110rpx;
		border-radius: 55rpx;
		background: $uni-text-color-main;
		transition: all 0.3s;
		transform: rotate(135deg);
		margin: 0 auto;
	}
	.item-list {
		overflow: hidden;
		transition: all .3s;
	}
	.item-box {
		width: 250rpx;
		height: 90rpx;
		border-radius: 45rpx;
		background: $uni-text-color-main;
		font-size: 32rpx;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 10rpx;
		.icon {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}
	}
}
</style>